import React, { ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
import classNames from 'classnames'; // 动态添加class

// 1. 按钮尺寸
export type btnSize = 'lg' | 'sm';
// 2. 按钮的类型
export type btnType = 'primary' | 'default' | 'danger' | 'link'
// 3. 按钮的基本属性

interface baseButtonProps {
  className?: string;
  size?: btnSize;
  btnType?: btnType;
  disabled?: boolean;
  href?: string;
  children?: React.ReactNode
}

type NativeButtonProps = baseButtonProps & ButtonHTMLAttributes<HTMLElement>
type AnchorButtonProps = baseButtonProps & AnchorHTMLAttributes<HTMLElement>
// Partial 组合类型的 <NativeButtonProps & NativeButtonProps & NativeButtonProps>
type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>

export const Button: React.FC<ButtonProps> = (props) => {
  const {
    className,
    size,
    btnType,
    disabled,
    href,
    children,
    ...restProps
  } = props;

  const classes = classNames('btn', className, {
    [`btn-${size}`]: size,
    [`btn-${btnType}`]: btnType,
  })

  // size ===> btn-[size]
  // btnType ====> btn-[btnType]
  // className==> btn aaa size

  return <button
    className={classes}
    disabled={disabled}
    {...restProps}
  >{children}</button>
}

export default Button;